<template>
  <div v-if="room">
    <el-drawer
      :title="room.name"
      :visible.sync="drawer"
      :before-close="handlerClose"
      :show-close="true"
      :wrapperClosable="false"
      size="600px"
      direction="rtl"
    >
      <div class="room-detail">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="ruleForm"
        >
          <el-form-item label="开放时间" prop="open_time">
            <el-checkbox-group v-model="ruleForm.open_time">
              <el-checkbox label="周一"></el-checkbox>
              <el-checkbox label="周二"></el-checkbox>
              <el-checkbox label="周三"></el-checkbox>
              <el-checkbox label="周四"></el-checkbox>
              <el-checkbox label="周五"></el-checkbox>
              <el-checkbox label="周六"></el-checkbox>
              <el-checkbox label="周日"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <seats :seats="JSON.parse(room.seats)" />
        <div class="located">
          <div>位置:</div>
          <div>{{ room.located }}</div>
        </div>
        <div class="btn">
          是否开放<el-switch v-model="room.open"></el-switch>
        </div>
        <div class="submit">
          <el-button @click="$emit('done')">取 消</el-button>
          <el-button type="primary" @click="update">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Seats from "@components/content/Seats";
import { getOneReadingRoom, changeReadingRoom } from "@network/manager";

export default {
  components: { Seats },
  props: {
    drawer: {
      type: Boolean,
      default() {
        return true;
      },
    },
    id: {
      type: Number,
      default() {
        0;
      },
    },
  },
  data() {
    return {
      room: null,
      ruleForm: {
        open_time: [],
      },
      rules: {
        open_time: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个开放时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    async update() {
      let open = this.room.open,
        open_time = this.ruleForm.open_time.join(",");
      console.log(open, open_time);
      await changeReadingRoom({open, open_time}).then((res) => {
        if (res.data.tag) {
          this.$message.success("修改成功!");
          this.$emit("done");
          this.$emit('reload');
        } else {
          this.$message.error("修改失败!");
        }
      });
    },
    handlerClose() {
      this.$emit("done");
    },
  },
  created() {
    getOneReadingRoom(this.id).then((res) => {
      console.log("res", res);
      if (res.data.tag) {
        this.ruleForm.open_time = res.data.room[0].open_time.split(",");
        
        this.room = res.data.room[0];
        this.room.open = this.room.open ? true:false;
      }
    });
  },

  mounted() {},
};
</script>
<style scoped>
.room-detail {
  flex-direction: column;
  padding: 20px;
}

.ruleForm {
  margin-left: -20px;
}

.btn {
  display: flex;
  justify-content: right;
  gap: 10px;
  padding: 10px;
}

.submit {
  position: absolute;
  display: flex;
  gap: 10px;
  bottom: 30px;
  right: calc(50% - 245px);
}

.submit > button {
  min-width: 120px;
  width: 240px;
  margin: 0 auto;
}

.located {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(194, 194, 194);
  padding: 10px;
}

.located > div:nth-child(1) {
  color: cornflowerblue;
}
</style>